<template>
  <div class="statistics-device">
    <df-search-title title="设备概况"
                     @btn-change="dateTypeChange"
                     @search="search"
                     has-date-type has-search has-reset has-date></df-search-title>
    <div class="table bg p20" v-loading="loading">
      <div class="counts flex jcb mb10">
        <div class="count flex-1 tac lh1" v-for="(count, i) in infoLabel" :key="i">
          <div class="label">{{count.label}}</div>
          <div class="value mt10 fs20">{{tools.moneyNumber(info[count.prop])}}</div>
        </div>
      </div>
      <gl-table :data="data" :columns="columns" @sort-change="sortChange"></gl-table>
      <gl-pagination :total="total" :curr="curr" :size="limits" @callback="paginationChange"></gl-pagination>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
    name: "StatisticsDevice",
    computed: {
      ...mapGetters(['userInfo']),
    },
    data() {
      return {
        dateArr: [],
        loading: false,

        info: {},
        infoLabel: [
          {label: '用户总数', prop: 'total_member'},
          {label: '设备总数', prop: 'total_consume'},
          {label: '已激活', prop: 'total_act'},
          {label: '待激活', prop: 'total_not_act'},
        ],

        data: [],
        columns: [
          {label: '客户名称', prop: 'name'},
          {label: '所属业务员', prop: 'bus_name'},
          {label: '上线产品', prop: 'product_num', sortable: 'custom'},
          {label: '设备总数', prop: 'consume_num', sortable: 'custom', text: 0},
          {label: '已激活设备数', prop: 'act_device', text: 0},
          {label: '待激活设备数', prop: 'not_act_device', text: 0},
          {label: '关联用户数', prop: 'member_num', sortable: 'custom', text: 0},
        ],
        total: 0,
        curr: 1,
        limits: 10,
        orderBy: [],
      }
    },
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
      getInfo() {
        //
      },
      getList(init) {
        //
        if (init) {
          this.curr = 1;
        }

        let [start_time, end_time] = this.dateArr || [];

        if (start_time) {
          start_time = start_time / 1000 | 0;
        }
        if (end_time) {
          end_time = end_time / 1000 | 0;
        }

        this.loading = true;
        this.http.$post('admin/member.Api/member_census', {
          company_id: this.userInfo.company_id,
          order: [this.orderBy],
          start_time,
          end_time,
          curr: this.curr,
          limits: this.limits,
        },{loading:true}).then(res => {
            // console.log(res);
          this.total = res.data.total;
          this.data = res.data.list;
          this.info = res.data;
          this.loading = false;
        }).catch(e => {
          this.$err(e);
          this.loading = false;
        });
      },
      sortChange(column, prop, order) {
         
        this.orderBy = order ? [prop, order.replace('ending', '')] : [];
        this.getList();
      },
      dateTypeChange(val, next) {
        next();
      },
      search(arr) {
        this.dateArr = arr || [];
        this.getList(1);
      },
      paginationChange({curr, size}) {
        this.curr = curr;
        this.limits = size;
        this.getList();
      }

    },
  }
</script>

<style scoped lang="less">
  .bg {
    background-color: #fff;
    border-radius: 5px;
  }

  .counts {
    padding: 20px 0;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
    border-radius: 5px;
    font-size: 16px;
    color: #666;
    .value {
      color: #333;
    }
  }

</style>